<!--资源利用率分析-->
<div class="rur consume-panel">
    <el-row style="border-bottom: 1px solid #00bcb7;height: 140px;" >
        <el-col :span="8" style="padding-left: 20px;padding-right: 60px">
            <el-row>
                <span class="font-subtitle-sty">执行航班：</span>
                <span class="data-sty">110</span>
                <span class="unit-sty">架次</span>
            </el-row>
            <el-row style="text-align: center" >
                <span class="font-subtitle-sty">进港：</span>
                <span class="data-sty">45</span>
                <span class="unit-sty">架次</span>
            </el-row>
            <el-row style="text-align:right">
                <span class="font-subtitle-sty">出港：</span>
                <span class="data-sty">65</span>
                <span class="unit-sty">架次</span>
            </el-row>
        </el-col>
        <el-col :span="16">
            <el-row class="font-subtitle-sty">设 备 供 给：</el-row>
            <el-row style="line-height: 30px;text-align: center;margin-top: 15px">
                <el-col :span="4" class="text-sty">加油车：</el-col>
                <el-col :span="3" >
                    <span class="data-sty">3</span>
                    <span class="unit-sty">辆</span>

                </el-col>
                <el-col :span="4" class="text-sty">加水车：</el-col>
                <el-col :span="3">
                    <span class="data-sty">5</span>
                    <span class="unit-sty">辆</span>
                </el-col>
                <el-col :span="4" class="text-sty">除冰车：</el-col>
                <el-col :span="3">
                    <span class="data-sty">2</span>
                    <span class="unit-sty">辆</span>
                </el-col>
            </el-row>
            <el-row style="line-height: 30px;text-align: center">
                <el-col :span="4" class="text-sty">装卸货车：</el-col>
                <el-col :span="3">
                    <span class="data-sty">7</span>
                    <span class="unit-sty">辆</span>
                </el-col>
                <el-col :span="4" class="text-sty">牵引车：</el-col>
                <el-col :span="3" >
                    <span class="data-sty">5</span>
                    <span class="unit-sty">辆</span>
                </el-col>
                <el-col :span="4" class="text-sty">客梯车：</el-col>
                <el-col :span="3" >
                    <span class="data-sty">5</span>
                    <span class="unit-sty">辆</span>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <!--**********************************************************-->

    <el-row style="border-bottom: 1px solid #00bcb7;margin-top: 5px" >
        <el-row class="font-subtitle-sty" >资源利用率排行</el-row>
        <el-row style="margin: 15px">
            <el-col :span="5" style="padding-right: 50px;" v-for="(item,index) in Tops" :key=item.name>
                <el-row >
                    <div style="
    position: absolute;
    height:80%;
    width: 80%;
    top:0px;
    left: 0px;
    border: solid 0px blue;
    border-bottom: 0px;
    border-right: 0px;">
                    </div>
  <!--下线-->
                    <div style="
    position: absolute;
    height:2px;
    width: 95%;
   background: -webkit-linear-gradient(left, #033043 , #28c8e5); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(right,  #033043 , #28c8e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right,  #033043 , #28c8e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,  #033043 , #28c8e5); /* 标准的语法 */">
                    </div>

                    <div style="
    position: absolute;
    height:2px;
    width: 95%;
bottom: 2px;


 background: -webkit-linear-gradient(left, #28c8e5, #033043); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(right , #28c8e5,  #033043); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right , #28c8e5,  #033043); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right , #28c8e5,  #033043); /* 标准的语法 */">
                    </div>
                    <!--上-->
                    <div style="
    position: absolute;
    height:13px;
    width: 2%;
    top:-5px;
    left: 40%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                    </div>
                    <div style="
    position: absolute;
    height:13px;
    width: 2%;
    top:-5px;
    left: 35%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                    </div>


                    <div style="
    position: absolute;
    height:13px;
    width: 40px;
    top:-5px;
    left: 45%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                    </div>
                    <!--$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$-->
<!--左线-->
                    <div style="
    position: absolute;
    height: 80%;
    width: 2px;
    top: 10%;
    left: -5px;
    background:linear-gradient(to top, #033043,#28c8e5) "
                >
 <!--右线-->
                </div>
                    <div style="
    position: absolute;
    height: 80%;
    width: 2px;
    top: 10%;
    right: -5px;
    background:linear-gradient(to top,#28c8e5, #033043) "
                    >
                    </div>
 <!--左矩形-->
                    <div style="
    width: 10px;
    height: 40%;
    background: linear-gradient(#28c8e5,#033043);
    left: -9px;
    top: 25%;
    position: absolute;
"></div>
<!--下矩形-->
                    <div style="
    width: 40%;
    height: 10px;
    background: linear-gradient(to left, #033043, #28c8e5);
    left: 30%;
    bottom:-2px ;
    position: absolute;
"></div>
<!--右矩形-->
                    <div style="
    width: 10px;
    height: 40%;
    background: linear-gradient(#033043,#28c8e5);
    right: -9px;
    top: 25%;
    position: absolute;
">
                    </div>

                    <div style="
    position: absolute;
     height:80%;
    width: 80%;
    bottom: 0px;
    right: 0px;

    border: solid 0px #28c8e5;
    border-top: 0px;
    border-left: 0px;">

                    </div>



                    <el-row>
                        <el-col :span="10" class="ruRank">
                            <span style="color: #f6f804">Top{{index+1}}</span>
                        </el-col>
                        <el-col :span="14">
                        </el-col>
                    </el-row>

                    <el-row style="font-size: 14px;text-align: center;height: 30px;line-height: 30px;color: #f6f804">{{item.name}}</el-row>
                    <el-row>
                        <el-col :span="14" style="height: 1px;"></el-col>
                        <el-col :span="10" class="ruRank" style="color: #f6f804">
                            {{item.useRatio}}
                        </el-col>
                    </el-row>
                </el-row>
            </el-col>




            <el-col :span="9" style="padding-top: 10px;">
                <el-row>
                    <el-col :span="8">
                        <div class="juxing">4</div>
                    </el-col>
                    <el-col :span="8" class="text-sty">牵引车</el-col>
                    <el-col :span="8" class="text-sty1">85%</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="8">
                        <div class="juxing">5</div>
                    </el-col>
                    <el-col :span="8" class="text-sty">客梯车</el-col>
                    <el-col :span="8" class="text-sty1">80%</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="8">
                        <div class="juxing">6</div>
                    </el-col>
                    <el-col :span="8" class="text-sty">配餐车</el-col>
                    <el-col :span="8" class="text-sty1">75%</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="8">
                        <div class="juxing">7</div>
                    </el-col>
                    <el-col :span="8" class="text-sty">排污车</el-col>
                    <el-col :span="8" class="text-sty1">70%</el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-row>
    <el-row>


        <!--***********************************************************-->
        <el-row style="margin-top: 5px;margin-bottom: 5px" class="font-subtitle-sty">
            资源利用率详情
        </el-row>
        <el-row class="font-subtitle-sty" style="font-weight:bold;text-align: center">
            2018年
        </el-row>
        <el-row style="margin-top: 10px">
            <el-col :span="8">
                <!--加油车利用率分析-->
                <div id="refuelingVehicleUr" :style="{width: '100%', height: '380px'}" >
                </div>
            </el-col>
            <el-col :span="8">
                <!--加水车利用率分析-->
                <div id="waterVehicleUr" :style="{width: '100%', height: '380px'}">
                </div>
            </el-col>
            <el-col :span="8">
                <!--装卸货车利用率分析-->
                <div id="argocVehicleUr" :style="{width: '100%', height: '380px'}" >
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" style="text-align: center" class="font-subtitle-sty">资源利用率</el-col>
        </el-row>
        <el-row>
            <el-col :span="10" style="text-align: right;line-height: 50px;padding-right: 3px;color: #79ff6c;font-size: 12px">低</el-col>
            <el-col :span="4" style="background: linear-gradient(to right,#79ff6c,#ff0f02);border: 1px solid #0e89e2;height: 50px ">
            </el-col>
            <el-col :span="10" style="line-height: 50px;padding-left: 3px;color: #ff0f02;font-size: 12px">高</el-col>
        </el-row>
    </el-row>

</div>